import React from 'react'
import {withRouter} from 'react-router-dom'

import {mockCreditList as CL} from "../../../../../../utils/mockdata"

import RoundConsumeIcon from "../../../../../../res/images/web/game-room/Money2@2x.png"
import './ConsumePopup.css'

import PopupLayout from "../PopupLayout/PopupLayout"
import CreditCard from "../../../../../../shared-components/CreditCard/CreditCard"

import {onSelected} from "../../../../../../utils/commonfunc"
import {Modal, WhiteSpace} from "antd-mobile";
import CancelIcon from "../../../../../../res/images/web/wallet/cancel@2x.png";
import CheckIcon from "../../../../../../res/images/web/wallet/choose pay-selected@2x.png";
import UnCheckIcon from "../../../../../../res/images/web/wallet/choose@2x.png";
import CustomButton from "../../../../../../shared-components/CustomButton/CustomBotton";
import WeChatIcon from "../../../../../../res/images/web/wallet/wechat 2@2x.png";
import LocalStorageService from "../../../../../../utils/LocalStorageService";
import {connect} from "react-redux";
import {local, test} from "../../../../../../utils/constants";

class ConsumePopup extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            consumeList: CL,
            modal: {
                pay: false
            },
            payList: [
                {title: '微信(默认)', icon: WeChatIcon, select: true,},
            ]
        }
    }

    handleCreditClick = (e, credit) => {
        const consumeList = this.state.consumeList
        const callback = (list) => {
            this.setState({
                consumeList: list
            })
        }
        onSelected(credit, consumeList, 'coins', 'active', callback)
    }

    comfirmWechatOrder = (params) => {
        this.props.doCheckWechatOrder(params)
    }

    cancel = (key) => {
        this.setState({
            modal: {
                [key]: false,
            }
        })
    }

    showModal = (key) => {
        this.setState({
            modal: {
                [key]: true,
            },
        })
    }

    wechatPay = () => {
        const i = this.state.consumeList.findIndex(c => c.active === true)
        const style = i + 1
        const uid = LocalStorageService.get('userid')
        const matchId = this.props.match.params.gameId

        let baseUrl
        // if (test) {
        //     if (local) {
        //         baseUrl = 'http://localhost:3001/wallet?'
        //     } else {
        //         baseUrl = 'http://123.207.85.242:8080/wallet?'
        //     }
        // } else {
        //     baseUrl = 'http://www.youtoball.com:8080/wallet?'
        // }

        if (test) {
            if (local) {
                baseUrl = 'http://localhost:3001/game/'
            } else {
                baseUrl = 'http://123.207.85.242:8080/game/'
            }
        } else {
            baseUrl = 'http://www.youtoball.com:8080/game/'
        }

        // let baseUrl = test ? 'http://123.207.85.242:8080/wallet?' : 'http://www.youtoball.com:8080/wallet?'
        // const location = window.location
        // let redirect = baseUrl + 'goback=' + location
        const redirect = baseUrl + matchId + `?wechat=true&style=${style}`

        this.props.doWechatPay({
            uid,
            style,
            redirect,
        })
    }

    render() {
        const {
            visible,
            onClose,
            userDetail,
        } = this.props
        const {Gold,} = userDetail

        const select = this.state.consumeList.find(c => c.active === true)
        const {
            // coins,
            price,
            // exp,
        } = select
        const modalBtn = <CustomButton
            shadow='0px 6px 10px 0px rgba(43,138,247,0.4)'
            onClick={() => this.wechatPay()}
        ><span style={{letterSpacing: '12px'}}>确认支付</span></CustomButton>

        const payList = this.state.payList.map((pay, i) => (
            <div
                key={i}
                className={`flex-space-between-align-center pay-list-item${pay.select ? ' pay-list-item-select' : ''}`}
                onClick={(e) =>this.handlePayItemClick(pay)}
            >
                <div className='flex-center-align-center'>
                    <img src={pay.icon} alt='' style={{marginRight: '8px', height: 28, width: 28,}}/>
                    <span>微信</span>
                </div>



                <div className='flex-center-align-center'>
                    <img alt='' style={{height: 24, width: 24,}} src={pay.select ? CheckIcon : UnCheckIcon}/>
                </div>
            </div>

        ))

        const payModal = <Modal
            popup
            visible={this.state.modal.pay}
            onClose={() => this.cancel('pay')}
            animationType="slide-up"
        >
            <div style={{position: 'relative', padding: '15px'}}>

                <img alt='' src={CancelIcon} onClick={this.cancel} className='modal-cancel-icon'/>

                <div className='wallet-modal'>
                    <p className='wallet-modal-title'>支付详情</p>
                    <p className='wallet-modal-price'>
                        <span className='wallet-modal-price-rmb'>¥ </span>
                        {price}
                    </p>
                </div>
                <div style={{textAlign: 'left', marginBottom: '6px'}}>
                    <span className='pay-list-title'>支付方式</span>
                    {payList}
                </div>

                {modalBtn}

            </div>

        </Modal>

        const clTemplate = (this.state.consumeList.map(credit => (
            <CreditCard
                key={credit.price}
                credit={credit}
                onClick={(e) => {this.handleCreditClick(e, credit)}}
            />)
        ))

        const consumePopUpTemplate = (
            <PopupLayout
                popup
                visible={visible}
                onClose={() => onClose('gift')}
                animationType="slide-up"
                iconUrl={RoundConsumeIcon}
                Gold={Gold}
            >
                {payModal}
                <div className='g-r-c-r-consume-popup-title'>
                    <p>用户充值</p>
                </div>
                <WhiteSpace />
                <div
                    style={{
                        background: '#F8F8F8',
                    }}
                >
                    <div
                        style={{
                            padding: '8px 12px',
                        }}
                    >
                        <div
                            className='flex-space-between-align-center flex-wrap-container'
                        >
                            {clTemplate}
                        </div>
                        <WhiteSpace />
                        <div className='g-r-c-r-consume-popup-btn-c'>
                            <div className='g-r-c-r-consume-popup-btn g-r-c-r-consume-popup-btn-cancel' onClick={onClose}>取消</div>
                            <div
                                className='g-r-c-r-consume-popup-btn g-r-c-r-consume-popup-btn-ok'
                                onClick={() => this.showModal('pay')}
                            >充值</div>
                        </div>
                        <WhiteSpace />
                    </div>

                </div>

            </PopupLayout>
        )

        return consumePopUpTemplate
    }

}

const mapState = (state) => ({
    user: state.user,
})

const mapDispatchToProps = ({user: {fetchUserDetail, doWechatPay, doCheckWechatOrder},}) => ({
    fetchUserDetail: (id) => fetchUserDetail(id),
    doWechatPay: (payload) => doWechatPay(payload),
    doCheckWechatOrder: (payload) => doCheckWechatOrder(payload)
})

export default connect(mapState, mapDispatchToProps)(withRouter(ConsumePopup))
